<template>
  <div class="main" v-if="cet4list">

    <!-- <router-view></router-view> -->
    <!-- :name="transitionName" -->
    <transition mode="out-in" :name="transitionName">
      <router-view :cet4list="cet4list" @cheack="cheack" @cheackdetai="cheackdetai"
        @addVocabularylist="addVocabularylist" @delchecked="delchecked" @outstadydone="outstadydone" @outripe="outripe"
        @checkedripe="checkedripe" @lockworld="lockworld" :worlddeta="worlddeta" @getworldinfo="getworldinfo"
        @finishword="finishword" @ripefinish="ripefinish" >
      </router-view>
    </transition>

    <!-- <transition   name="van-slide-down">
      <router-view></router-view>
    </transition> -->

    <!-- <audio :src="worlddeta.music" ref="audio" controls style="display: none;" @ended="onendedFun"></audio> -->
  </div>
</template>

<script>
import { Toast } from 'vant'
import { getCET4 } from "./api/home.js"
export default ({
  data() {
    return {
      transitionName: "",
      cet4list: '',
      worlddeta: '',
      playicon: false
      // musicurl: ''
      // url: './assets/music/iteration_1.mp3',
      // musicurl: require(worlddeta.music),
      // musicurl: require('./assets/music/iteration_1.mp3'),


    };
  },
  methods: {
    getCET4Fun() {
      getCET4().then((data) => {
        this.cet4list = data.data;
        // console.log(this.cet4list);
      })
    },
    // playmuise() {//播放音频
    //   this.playicon = true
    //   this.$refs.audio.play();
    //   return this.playicon
    // },
    // onendedFun() {
    //   this.playicon = false
    //   console.log("结束");
    // },
    cheack(id) {//选择
      this.index = this.cet4list.findIndex(item => item.id == id);
      console.log(this.index);
      this.cet4list.forEach((item) => {
        item.detaicheak = false;
      });
      this.cet4list[this.index].detailinf = !this.cet4list[this.index].detailinf
      this.cet4list[this.index].detaicheak = !this.cet4list[this.index].detaicheak
    },
    cheackdetai(id) {//详细信息选择
      this.cet4list.forEach((item) => {
        item.detaicheak = false;
      });
      this.index = this.cet4list.findIndex(item => item.id == id);
      this.cet4list[this.index].detaicheak = !this.cet4list[this.index].detaicheak
    },
    addVocabularylist(id) {//取反生词
      this.index = this.cet4list.findIndex(item => item.id == id);
      this.cet4list[this.index].vocabularylist = !this.cet4list[this.index].vocabularylist
      if (this.cet4list[this.index].vocabularylist == true) {
        Toast.success('生词本添加成功');
      } else {
        Toast.fail('已从生词本删除');
      }
    },
    stadyagain() {

    },
    delchecked() {//删除已选生词
      this.cet4list.forEach((item) => {
        if (item.checked == true) {
          item.vocabularylist = !item.vocabularylist
        }
      });
    },
    outstadydone(id) {//重学
      this.index = this.cet4list.findIndex(item => item.id == id);
      this.cet4list[this.index].stadydone = !this.cet4list[this.index].stadydone
      this.cet4list[this.index].detaicheak = false;
      this.cet4list[this.index].detailinf = false;
    },
    outripe(id) {
      this.index = this.cet4list.findIndex(item => item.id == id);
      this.cet4list[this.index].ripe = !this.cet4list[this.index].ripe
      this.cet4list[this.index].detaicheak = false;
      this.cet4list[this.index].detailinf = false;
    },
    checkedripe() {//多选标熟
      this.cet4list.forEach((item) => {
        if (item.checked == true) {
          item.ripe = !item.ripe
          item.stadydone = !item.stadydone
          item.detaicheak = false;
          item.detailinf = false;
          item.checked = false;
        }
      });
    },
    lockworld(id) {//前往指定单词 
      this.cet4list.forEach((item) => {
        item.detaicheak = false;
        item.detailinf = false;
      });
      this.index = this.cet4list.findIndex(item => item.id == id);
      this.cet4list[this.index].detaicheak = true;
      this.cet4list[this.index].detailinf = true;
    },
    getworldinfo(id) {
      this.index = this.cet4list.findIndex(item => item.id == id);
      this.worlddeta = this.cet4list[this.index]
      // this.musicurl = this.worlddeta.music
      return this.worlddeta
    },
    finishword(id) {
      this.index = this.cet4list.findIndex(item => item.id == id);
      this.cet4list[this.index].stadydone = !this.cet4list[this.index].stadydone;
      if (this.cet4list[this.index].stadydone == true) {
        Toast.success('完成学习');
      } else {
        Toast.fail('重新学习');
      }
    },
    ripefinish(id) {
      this.index = this.cet4list.findIndex(item => item.id == id);
      this.cet4list[this.index].ripe = !this.cet4list[this.index].ripe;
      if (this.cet4list[this.index].ripe == true) {
        Toast.success('标熟成功');
      } else {
        Toast.fail('重新学习');
      }
    }
  },
  watch: {
    // (to, from) 
    $route(to) {

      // console.log(to, "to");
      // console.log(from, "from");


      if (to.meta.index == 2) {

        this.transitionName = "slide-left";
      } else if (to.meta.index == 1) {
        this.transitionName = "slide-down";
      }
    },
  },
  created() {
    this.getCET4Fun()
  }
})

</script>

<style lang="scss" >
// 公共css
@import "./assets/css/base.css";

.main {
  position: sticky;
}


.slide-left-enter {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}

.slide-left-leave-to {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}


.slide-down-enter {
  opacity: 0;
  transform: translate3d(0, 100%, 0);
}

.slide-down-leave-to {
  opacity: 0;
  transform: translate3d(0, 0, 100%);
}

.slide-left-enter-active,
.slide-left-leave-active,
.slide-down-enter-active,
.slide-down-leave-active {
  will-change: transform;
  transition: all 200ms;
  // position: absolute;
}

// .v-enter {
//   transform: translateX(150px);
//   opacity: 0;
// }

// .v-leave-to {
//   transform: translateX(-150px);
//   opacity: 0;
// }

// .v-enter-active,
// .v-leave-active {
//   transition: all 0.3s ease-in-out;
// }
</style>